import React from 'react';
import { Modal, ModalProps } from 'antd';
import ModalsFooter from './ModalsFooter';
import { SvgIcon } from '../icon';

interface Props extends ModalProps {
  onOk?: () => void;
  onCancel?: () => void;
  onAllCancel?: () => void;
  children?: React.ReactNode;
  okText?: string | React.ReactNode;
  cancelText?: string | React.ReactNode;
  footerCancelHidden?: boolean;
  footerAllCancelHidden?: boolean;
  footerOkHidden?: boolean;
  footerCancelDisabled?: boolean;
  footerOkDisabled?: boolean;
  confirmLoading?: boolean; // 添加此类型
  cancelLoading?: boolean;
  title?: React.ReactNode;
  maskClosable?: boolean;
  headerHeight?: number;
  footerHeight?: number;
  footer?: null | React.ReactNode;
  line?: boolean;
}

const TipsModalsHeader = () => {
  return (
    <div className="flex items-center">
      <SvgIcon icon="warning" size={20} color="#F08332" />
      <div className="ml-[10px] text-base font-bold text-[#1D2129]">提示</div>
    </div>
  );
};

const TipsModals = ({
  onOk,
  onCancel,
  onAllCancel,
  children,
  okText = '确定',
  cancelText = '取消',
  footerCancelHidden = false,
  footerOkHidden = false,
  footerCancelDisabled = false,
  footerAllCancelHidden = true,
  footerOkDisabled = false,
  confirmLoading = false,
  cancelLoading = false,
  title,
  maskClosable = false,
  headerHeight,
  footerHeight,
  footer,
  line = false,
  ...props
}: Props) => {
  const Footer = () => {
    if (footer === null) {
      return <></>;
    }

    if (footer !== null && footer !== undefined) {
      return footer;
    }

    return (
      <ModalsFooter
        okText={okText}
        cancelText={cancelText}
        footerCancelHidden={footerCancelHidden}
        footerOkHidden={footerOkHidden}
        footerCancelDisabled={footerCancelDisabled}
        footerOkDisabled={footerOkDisabled}
        confirmLoading={confirmLoading}
        cancelLoading={cancelLoading}
        footerAllCancelHidden={footerAllCancelHidden}
        onOk={onOk}
        onCancel={onCancel}
        onAllCancel={onAllCancel}
        line={line}
      />
    );
  };

  return (
    <Modal
      {...props}
      title={title ? title : <TipsModalsHeader />}
      footer={Footer}
      onCancel={onCancel}
      centered
      maskClosable={maskClosable}
      classNames={{
        content: '!p-0',
        header: '!p-[16px] !m-0 ',
        body: '!px-[46px] overflow-auto',
        footer: '!m-0',
      }}
      styles={{
        body: {
          maxHeight: `calc(100vh - ${headerHeight ? headerHeight : '56px'} - 48px - ${
            footerHeight ? footerHeight : '56px'
          })`,
        },
      }}
    >
      <div className="text-[#4E5969]">{children}</div>
    </Modal>
  );
};

export default TipsModals;
